<template>
  <div class="container">
    <div class="login-text">柑橘木虱网络平台与监测预警系统</div>
  <div class="box">
    <h2>修改密码</h2>
    <el-form label-width="80px" :model="form" :rules="rules" id="passwordForm" ref="formRef">
  <el-form-item label="旧密码" prop="oldPassword">
    <el-input type="password"
               id="oldPassword"
               name="oldPassword"
               placeholder="旧密码"
               v-model="form.oldPassword"></el-input>
  </el-form-item>
  <el-form-item label="新密码" prop="newPassword">
    <el-input type="password"
         id="newPassword"
         name="newPassword"
         placeholder="新密码"
         v-model="form.newPassword"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="confirmPassword">
    <el-input type="password"
               id="confirmPassword"
               name="confirmPassword"
               placeholder="再次输入新密码"
               v-model="form.confirmPassword"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary"
               round
               @click="submit">提交</el-button>
  </el-form-item>
 </el-form>
        </div>
        </div>
</template>

<script>
import '../../assets/icon/iconfont'
export default {
  name:'changePassword',
  data(){
    const confirmPassword = (rule,value,callback) => {
      if(value === ''){
        callback(new Error('输入的密码不能为空'))
      }else if(value !== this.form.newPassword){
        callback(new Error('两次密码输入不相同'))
      }else if(value.length < 6 || value.length > 20){
        callback(new Error('新密码长度应该在6到20位'))
      }else{
        callback()
      }
    }
    return{
      rules:{
          oldPassword:[{required:true,message:'请输入旧密码',trigger:'blur'}],
          newPassword:[{required:true,message:'输入的密码不能为空',triiger:'blur'},
                       {min:6,max:20,message:'密码长度应在6到20位'}],
          confirmPassword:[{required:true,validator:confirmPassword,trigger:'blur'}]
      },
      form:{
        oldPassword:'',
        newPassword:'',
        confirmPassword:''
      }
    }
  },
  methods:{
    submit(){
      this.$refs.formRef.validate(async (valid) => {
        console.log(valid)
        if(!valid) return
        const { data: res } = await this.$http.post(`/web/user/update`, this.form)
        console.log(res)
        if(res.code === 0){
          this.$message.success('修改成功！')
          window.localStorage.removeItem('token')
          window.localStorage.setItem('token', this.form.newPassword)
          this.$router.push('/login')
        }else{
          this.$message.error(res.message)
        }
      })
    },
  }
}
</script>

<style  scoped>
.container {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url('../../assets/bgimg.png');
}
.box{
    width: 50vh;
    height: 60vh;
    background: rgba(236, 233, 233, 0.623);
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3vh;
    margin: auto;
    text-align: center;
}
.box h2{
  margin-top: 5vh;
  font-size: 24px;
  color: rgba(70, 70, 241, 0.872);
}
#passwordForm{
  margin-top: 2vh;
}
.el-input{
    width: 90%;
    margin-right: 3vh;
}
.el-form-item{
  margin-top: 2vh;
}
.el-button{
  margin-right: 7vh;
  margin-top: 1vh;
}
</style>
